<template>
  <!-- 树状列表组件 -->
  <div class="meteorological-main">
    <ul class="meteorological-list" >
      <li class="meteorological-item" :class="{ active: btnActiveClass == item.equipmentId }" @click="selectPond(item)" v-for="(item,index) in meteorologicalList" :key="index + 'meteorological'">
        <span>{{ item.equipmentName }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import DeviceManagementApi from "@/api/basic-info-manage/device-management";
export default {
  data () {
    return {
      meteorologicalList: [],
      btnActiveClass: 0,
    }
  },
  async mounted () {
    await this.gettreelist()
  },
  methods: {
    handleSelectionChange (e) {
      this.$emit("treeselectvalue", e)
    },
    // 获取气象设备
    gettreelist () {
      DeviceManagementApi.queryByCondition({equipmentType:"WEATHERSTATION"}).then(res=>{
        if (res.success) {
          this.meteorologicalList = res.data;
          this.btnActiveClass = this.meteorologicalList[0]?.equipmentId
          this.$emit("treeselectvalue", this.meteorologicalList[0]?.equipmentId)
        }
      })
    },
    selectPond(item){
      this.$emit("treeselectvalue", item.equipmentId)
      this.btnActiveClass = item.equipmentId;
    }
  }
}
</script>
<style lang="scss" scoped>
.meteorological-main{
  display: flex;
  justify-content: center;
  // width: 100%; 
  height: 100%; 
  overflow: auto;
}
.meteorological-list{
  // width: 100%;
  list-style-type: none;
  padding-inline-start: 0;
  .meteorological-item{
    cursor: pointer;
    width: 218px;
    margin: 10px 0;
    border: 1px solid #59A1E8;
    height: 32px;
    background-color:transparent;
    color: #57A3E6;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    span{
      font-size: 14px;
    }
  }
  .active{
    background-color: #2A94FC;
    color: #fff;
  }
}
</style>
